<script setup>
import { onMounted, ref } from 'vue'
import { getHomeBannerApi } from '@/apis/home.js'

const bannerList = ref([])
const getHomeBanner = async () => {
  const { data } = await getHomeBannerApi()
  bannerList.value = data.banners
}

onMounted(() => getHomeBanner())

const activeIndex = ref(0)
const getActiveIndex = (index) => {
  activeIndex.value = index
}

const carousel = ref(null)
</script>

<template>
  <div class="home-banner">
    <el-carousel height="200px" always="never" @change="getActiveIndex" ref="carousel">
      <el-carousel-item v-for="item in bannerList" :key="item.encodeId">
        <div class="banner">
          <img :src="item?.imageUrl" alt="">
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="small-banner">
      <img :src="bannerList[activeIndex + 1]?.imageUrl" alt="">
      <div class="control-btn">
        <i class="iconfont icon-houtui" @click="carousel.prev()"></i>
        <i class="iconfont icon-kuaijin" @click="carousel.next()"></i>
      </div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.home-banner {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.banner {
  height: 200px;
  display: flex;
  align-items: center;

  img {
    width: 100%;
    height: 100%;
  }
}

.small-banner {
  height: 200px;
  width: 120px;
  background-color: rgb(241, 246, 247, 0.4);
  border-radius: 10px;

  img {
    width: 120px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
  }
}

.control-btn {
  width: 90px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  .iconfont {
    font-size: 30px;
    color: #929292;
    opacity: 0.4;
    cursor: pointer;
  }
}

.el-carousel {
  margin-right: 15px;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  object-fit: cover;
  background-color: rgb(241, 246, 247, 0.4);
}

.el-carousel__item {
  height: 200px;
  object-fit: cover;
}

:deep(.el-carousel__button) {
  width: 22px;
}
</style>
